<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1>{{count}}---{{msg}}---计算属性message{{message}}</h1>
        <button @click='changeClick'>点击切换</button>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                count: 0,
                msg: "偶数"
            }
        },
        methods: {
            changeClick() {
                // 生成随机数，0或者1
                this.count = Math.floor(Math.random() * 2)
                if (this.count === 0) {
                    this.msg = "偶数"
                } else {
                    this.msg = "奇数"
                }
            }
        },
        computed: {
            message() {
                /*
                只有当this.count的值发生变化的时候才会执行message函数进行计算结果
                如果当前的值和上一次的值相同，该方法不会被调用，也就相当于this，count
                被监听了，只有值变化的时候才会执行

                计算属性特点：
                1.计算属性有缓存
                2.计算属性运行就会被执行一次
                3.一次可以监听多个值，只要有一个发生变化，都会执行函数，只要是写在computed里面的
                4.计算属性一定要有一个return，要计算出一个结果
                5.计算属性是多个值影响一个值
                6.写在计算属性中的所有响应式数据都会被监听
                7.不支持异步
                
                */
                return this.count === 0 ? "偶数" : "奇数"
                // setTimeout(() => {
                //     return this.count === 0 ? "偶数" : "奇数"
                // }, 1000);
            }
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>